<template>
  <div>
<h1>用户借款信息 还款列表</h1>
<table class="table table-bordered">
  <tr>
    <td>借款名称</td>
    <td>用户借款金额</td>
    <td>利息</td>
    <td>操作</td>
  </tr>
  <tr v-for="item in list">
    <td>{{  item.BName}}</td>
    <td>{{  item.UBMoney}}</td>
    <td>{{  item.INName}}%</td>
    <td>
      <input type="button" value="还款" @click="huan(item.UBId)">
    </td>
  </tr>
</table>
<input type="button" value="汇总" @click="count">
<!-- <input type="button" value="列表" @click="check"> -->
 <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted, toRaw } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from '../store/use';
const store = useStore();
const router = useRouter();
const route = useRoute();

let data:any=reactive({
  list:[]
})

let {list}=toRefs(data)

const huan=(UBId:any)=>{
  router.push({
    path:'/putongRedeemBorrow',
    query:{
      UBId:UBId
    }
  })
}

const count = ()=>{
  router.push({
    path:'/count'
  })
}

onMounted(()=>{
  getList()
})

const getList=()=>{
  axios({
    url:'/api/Users/GetUserBorrowInfo',
    method:'get',
    params:{
      userId:store.userInfo.userId
    }
  })
  .then(res=>{
    console.log(res);
    list.value=res.data.data
  })
  .catch(err=>{
    console.log(err);
    
  })
}

const check=()=>{
  router.push({
    path:'/check'
  })
}
</script>

<style scoped>

</style>